<template>
  <div class="admin-home">
    <div style="width: 100%;display: flex;justify-content: center;">
      <div class="left" style="width: 50%">
        <div class="div-1">
          <div class="div-1-top">
            <div class="avatar">
              <a-avatar :src="currentUser.avatar"
                        alt="未设置"
                        style="width: 100%;height: auto">
              </a-avatar>
            </div>
            <div class="name">
              <a-descriptions :title="currentUser.name">
                <a-descriptions-item label="账号">{{ currentUser.account }}</a-descriptions-item>
                <a-descriptions-item label="角色">{{ currentUser.userRole }}</a-descriptions-item>
                <a-descriptions-item label="状态">{{ currentUser.userStatus }}</a-descriptions-item>
                <a-descriptions-item>
                  HELLO，{{ currentUser.name }}，祝你开心每一天！
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
          <div class="div-1-bottom">
            <a-card :bordered="false" :hoverable="true" style="width: 30%" title="宣讲会-审核">
              <p style="display: flex; align-items: center;justify-content: flex-start">
                <router-link to="/admin/audit/video">宣讲会--去审核&nbsp;:&nbsp;&nbsp;<EditOutlined/>&nbsp;&nbsp;</router-link>
                <a-badge :count="videoCount"/>
              </p>
            </a-card>
            <a-card :bordered="false" :hoverable="true" style="width: 30%" title="企业-审核">
              <p style="display: flex; align-items: center;justify-content: flex-start">
              <router-link to="/admin/audit/enterprise">企业--去审核&nbsp;:&nbsp;&nbsp; <EditOutlined/>&nbsp;&nbsp;</router-link>
              <a-badge :count="enterpriseCount"/>
              </p>
            </a-card>
            <a-card :bordered="false" :hoverable="true" style="width: 30%;padding: -20px" title="举报-审核">
              <p style="display: flex; align-items: center;justify-content: flex-start">
              <router-link to="/admin/manage/report">举报--去审核&nbsp;:&nbsp;&nbsp;<EditOutlined/>&nbsp;&nbsp;</router-link>
              <a-badge :count="reportCount"/>
              </p>
            </a-card>
          </div>
        </div>
        <div class="div-2">
          <div class="div-2-top">
            <a-input-search
                v-model:value="data.searchName"
                allow-clear
                enter-button
                placeholder="输入公告标题"
                size="middle"
                style="width: 60%; padding: 10px;margin-left: 8px;"
                @search="onSearch"
            />

            <div>
              <a-button type="primary" @click="showModal">新增公告</a-button>
              <a-modal v-model:open="open" title="新增公告">
                <a-form
                    ref="formRef"
                    :label-col="labelCol"
                    :model="formState"
                    :rules="rules"
                    :wrapper-col="wrapperCol"
                >
                  <a-form-item ref="bulletinTitle" label="标题" name="bulletinTitle">
                    <a-input v-model:value="formState.bulletinTitle"/>
                  </a-form-item>

                  <a-form-item label="内容" name="bulletinText">
                    <a-textarea v-model:value="formState.bulletinText"
                                :auto-size="{minRows: 3, maxRows: 20}"
                                :maxlength="600"
                                show-count
                                style="width: 400px"
                    />
                  </a-form-item>
                </a-form>
                <template #footer>
                  <div v-show="!isQuery">
                    <a-button danger type="primary" @click="resetForm">重置</a-button>
                    <a-button key="cancel" @click="handleCancel">取消</a-button>
                    <a-button v-if="!isUpdate" key="submit" type="primary" @click="handleOk">确认</a-button>
                    <a-button v-else :key="submit" type="primary" @click="handleUpdateOk">确认修改</a-button>
                  </div>
                </template>
              </a-modal>
            </div>
          </div>
          <div class="div-2-bottom">

            <a-list :data-source="listData" :pagination="pagination"
                    size="small"
                    style="width: 100%;margin-bottom: 30px;padding-right: 20px"
            >
              <template #renderItem="{ item }">
                <a-list-item :key="item.bulletinTitle" class="list-item">
                  <a-card :title="item.bulletinTitle" style="width: 100%">
                    <template #extra>
                      <a-button type="link" @click="editBulletin(item.bulletinId)" style="padding-left: 0;padding-right: 5px">编辑</a-button>
                      <a-button type="link" @click="queryBulletin(item.bulletinId)" style="padding-left: 0;padding-right: 5px">查看</a-button>
                      <a-button danger type="link" @click="deleteBulletin(item.bulletinId)" style="padding-left: 0;padding-right: 5px">删除</a-button>
                    </template>
                    <span v-html="truncateText2(item.bulletinText)"></span>
                  </a-card>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
      </div>


      <div class="right" style="width: 50%">

        <div>
          <div ref="chartRef1" style="width:100%; height: 400px;"></div>
        </div>
        <div>
          <div ref="chartRef2" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>

  </div>

</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted, reactive, ref} from 'vue';
import {EditOutlined} from '@ant-design/icons-vue';

const chartRef1 = ref(null);
const chartRef2 = ref(null);
//获取当前用户信息

//柱状图
const setChart1 = async () => {
  const chartDom = chartRef1.value;
  const myChart = echarts.init(chartDom);

  // 柱状图配置项
  const res = await queryHotCityAverageSalaryAPI();
  console.log(JSON.stringify(res))
  const HotCityAverageSalary = {
    beijing: res.data.data.beijingAverageSalary,
    shanghai: res.data.data.shanghaiAverageSalary,
    guangzhou: res.data.data.guangzhouAverageSalary,
    shenzhen: res.data.data.shenzhenAverageSalary,
    hangzhou: res.data.data.hangzhouAverageSalary,
    chengdu: res.data.data.chengduAverageSalary,
    nanjing: res.data.data.nanjingAverageSalary,
    wuhan: res.data.data.wuhanAverageSalary,
    suzhou: res.data.data.suzhouAverageSalary,
    chongqing: res.data.data.chongqingAverageSalary,
    tianjin: res.data.data.tianjinAverageSalary,
  }


  // 配置柱状图的数据和样式
  const option = {
    // 添加title属性来设置标题相关信息
    title: {
      text: '热门城市-平均薪资', // 这里设置标题的具体文本内容，你可以按需修改
      left: 'center' // 设置标题的位置，'center'表示居中显示，还可以设置为'left'（居左）、'right'（居右）等
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉', '苏州', '重庆', '天津',]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [
          HotCityAverageSalary.beijing,
          HotCityAverageSalary.shanghai,
          HotCityAverageSalary.guangzhou,
          HotCityAverageSalary.shenzhen,
          HotCityAverageSalary.hangzhou,
          HotCityAverageSalary.chengdu,
          HotCityAverageSalary.nanjing,
          HotCityAverageSalary.wuhan,
          HotCityAverageSalary.suzhou,
          HotCityAverageSalary.chongqing,
          HotCityAverageSalary.tianjin,
        ],
        type: 'bar'
      }
    ]
  };
  // 使用配置项显示图表
  myChart.setOption(option);
}
//饼图
const setChart2 = async () => {
  //饼图
  const chartDom2 = chartRef2.value;
  const myChart2 = echarts.init(chartDom2);

  // 饼图配置项
  const res = await querySpreadJobCountAPI();
  console.log(JSON.stringify(res))
  const SpreadJob = {
    internetCount: res.data.data.internetCount,
    serviceCount: res.data.data.serviceCount,
    medicalCount: res.data.data.medicalCount,
    educationCount: res.data.data.educationCount,
    financeCount: res.data.data.financeCount,
    otherCount: res.data.data.otherCount
  }


  // 配置柱状图的数据和样式
  const option2 = {
    title: {
      text: '岗位-行业分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          {value: SpreadJob.internetCount, name: '互联网/AI'},
          {value: SpreadJob.serviceCount, name: '服务业/餐饮'},
          {value: SpreadJob.medicalCount, name: '医疗/制药'},
          {value: SpreadJob.educationCount, name: '教育/培训'},
          {value: SpreadJob.financeCount, name: '金融/制造'},
          {value: SpreadJob.financeCount, name: '游戏/电子'},
          {value: SpreadJob.financeCount, name: '网络社交/媒体'},
          {value: SpreadJob.financeCount, name: '房地产/建筑'},
          {value: SpreadJob.financeCount, name: '零售/批发'},
          {value: SpreadJob.otherCount, name: '其他行业'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }
    ]
  };
  // 使用配置项显示图表
  myChart2.setOption(option2);
}
//审核数据获取
const videoCount = ref(0)
const enterpriseCount = ref(0)
const reportCount = ref(0)
const getDataCount = async () => {
  videoCount.value = (await queryVideoStatusCount("审核中")).data.data
  enterpriseCount.value = (await queryEnterpriseStatusCount("审核中")).data.data
  reportCount.value = (await queryReportStatusCount("审核中")).data.data


}

//获取当前登录用户信息
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore();
const userInfo = userStore.userInfo;
const currentUser = reactive({
  name: '',
  avatar: 'https://file.moyublog.com/d/file/2023-03-03/d06a216a9182eb9f13843c222c7d86bb.jpg',
  account: '',
  userRole: '',
  userStatus: ''
});
const getCurrentUser = () => {
  currentUser.name = userInfo.userName
  if (userInfo.userAvatarUrl != null) {
    currentUser.avatar = "http://localhost:8080/image/download?name=" + userInfo.userAvatarUrl
  }
  currentUser.account = userInfo.account
  if (userInfo.userRole === 'admin') {
    currentUser.userRole = "管理员"
  }
  if (userInfo.userStatus === 0) {
    currentUser.userStatus = "正常"
  }

}
onMounted(() => {
  setChart1()
  setChart2()
  getDataCount()
  getCurrentUser()
});

import {pageVideoAPI} from "@/apis/video.js";
import {queryEnterpriseStatusCount, queryReportStatusCount, queryVideoStatusCount} from "@/apis/user.js";
import {queryHotCityAverageSalaryAPI, querySpreadJobCountAPI} from "@/apis/chart.js";


//公告栏
// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText1 = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};
// 新增方法用于截断文本并添加省略号
const truncateText2 = (text) => {
  return text.slice(0, 15) + '. . . . .';
};
const open = ref(false);
const showModal = () => {
  open.value = true;
  isQuery.value = false;
};
const deleteBulletin = async (bulletinId) => {
  const res = await deleteBulletinAPI(bulletinId)
  console.log(String(bulletinId))
  if (res.data.flag) {
    message.success('删除成功');
    await getData(data.value);
  }
}
const isUpdate = ref(false);//是否是修改
const editBulletin = async (bulletinId) => {
  open.value = true;
  isQuery.value = false;
  const res = await queryBulletinDetailByIdAPI(bulletinId)
  if (res.data.flag) {
    formState.bulletinId = res.data.data.bulletinId
    formState.bulletinTitle = res.data.data.bulletinTitle
    formState.bulletinText = res.data.data.bulletinText
    formState.bulletinAuthor = res.data.data.bulletinAuthor
  }

  formState.bulletinAuthor = userInfo.userName
  isUpdate.value = true;
}
const isQuery = ref(false);//是否是查询
const queryBulletin = async (bulletinId) => {
  open.value = true;
  const res = await queryBulletinDetailByIdAPI(bulletinId)
  if (res.data.flag) {
    formState.bulletinId = res.data.data.bulletinId
    formState.bulletinTitle = res.data.data.bulletinTitle
    formState.bulletinText = res.data.data.bulletinText
    formState.bulletinAuthor = res.data.data.bulletinAuthor
  }
  isQuery.value = true;
}
const handleCancel = () => {
  open.value = false;
  resetForm();
};
const handleUpdateOk = async () => {
  const res = await updateBulletinAPI(formState)
  if (res.data.flag) {
    message.success('修改成功');
    await getData(data.value);
    open.value = false;
    resetForm();
  }
}
const handleOk = () => {
  onSubmit()
};
import {
  addBulletinAPI,
  deleteBulletinAPI,
  pageBulletinAPI,
  queryBulletinDetailByIdAPI,
  updateBulletinAPI
} from "@/apis/bulletin.js";
import {message} from "ant-design-vue";

const formRef = ref();
const labelCol = {
  span: 3,
};
const wrapperCol = {
  span: 13,
};
const formState = reactive({
  bulletinId: '',
  bulletinTitle: '',
  bulletinText: '',
  bulletinAuthor: ''
});
const rules = {
  bulletinTitle: [
    {
      required: true,
      message: '请输入公告标题',
      trigger: 'change',
    },
  ],
  bulletinText: [
    {
      required: true,
      message: '请输入公告内容',
      trigger: 'blur',
    },
  ],
};
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        formState.bulletinAuthor = userInfo.userName
        const res = await addBulletinAPI(formState);
        if (res.data.flag) {
          message.success('添加成功');
          await getData(data.value);
          resetForm();
          open.value = false;
        }
      })
      .catch(error => {
        console.log('error', error);
      });
};
const resetForm = () => {
  formRef.value.resetFields();
};

const listData = ref([]);
const data = ref({pageCurrent: 1, pageSize: 6, searchName: '',});
const getData = async (data) => {
  const res = await pageBulletinAPI(data)
  pagination.total = res.data.data.total
  listData.value = res.data.data.data
}
const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 6,
  total: 0,
};


// 生命周期
onMounted(() => {
  getData(data.value);
});

//搜索
const onSearch = searchValue => {
  console.log('use value', searchValue);
  getData(data.value);
};

</script>
<style lang="scss" scoped>
.admin-home {
  height: auto;
  margin: -20px;
  padding: 10px;

  .left {
    height: auto;

    .div-1 {
      height: auto;

      .div-1-top {
        display: flex;

        .avatar {
          width: 20%;
          margin-right: 15px;
        }

        .name {
          width: 80%;

        }
      }

      .div-1-bottom {
        background: #ececec;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      }
    }

    .div-2 {
      background: #ececec;

      .div-2-top {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
      }

      .div-2-bottom {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .list-item {
          width: 48%;
          display: inline-block; // 让列表项横排显示，设置为行内块元素
          vertical-align: top; // 让列表项顶部对齐，视觉上更整齐，可选设置
          &:last-child {
            margin-right: 0; // 最后一个列表项去掉右侧间距，可选优化
          }
        }

        // 如果内部的 a-card 等元素宽度超出了父容器宽度，也需要设置其能自动换行
        a-card {
          display: block; // 确保内部卡片元素占满一行宽度等情况，可根据实际调整
          word-break: break-all; // 允许单词内换行，避免内容过长超出不换行情况
          width: 100%;
        }
      }
    }
  }

  .right {
    height: auto;

  }
}

</style>
